<template>
  <div class="listWapper">
    <customDetailsTopbar title="企业信息" flag @back="back" />
    <div id="customScroolBox" class="listInner px-1">
      <customSearch ref="customSearch" placeholder="请输入企业名称" title="企业列表" :total="total" :is-super-search="true" @search="handleSearch" @superSearch="openSuperSearch" />
      <div v-if="listData.length>0" class="common_list table-list">
        <template v-if="listData.length>0">
          <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
            <div class="content_area">
              <!--            <div class="number_order"><img src="@/assets/images/qyicon.png"></div>-->
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.companyName }}
                </div>
                <ul>
                  <li v-if="current === '安全生产'">
                    <i class="iconfont c-text-color1">&#xe634;</i>
                    <div class="label">行政区划：</div>
                    <div class="value">{{ item.fullName || '/' }}</div>
                  </li>
                  <li v-else-if="current === '环保管理' || current === '消防管理' || current === '能源管理'">
                    <i class="iconfont c-text-color1">&#xe634;</i>
                    <div class="label">行政区划：</div>
                    <div class="value">{{ item.fullName.replace('null','') || '/' }}</div>
                  </li>
                  <!-- <li>
                    <i class="iconfont c-text-color2">&#xe790;</i>
                    <div class="label">行业类别：</div>
                    <div class="value">{{ item.industryType || '/' }}</div>
                  </li> -->
                  <li v-if="current === '安全生产'">
                    <i class="iconfont c-text-color3">&#xe69e;</i>
                    <div class="label">安全生产管理人：</div>
                    <div class="value">{{ item.securityHead || '/' }}</div>
                  </li>
                  <li v-if="current === '安全生产'">
                    <i class="iconfont c-text-color4">&#xe611;</i>
                    <div class="label">联系电话：</div>
                    <div class="value">{{ item.securityHeadPhone || '/' }}</div>
                  </li>
                  <li v-if="current === '安全生产'">
                    <i class="iconfont c-text-color3">&#xe69e;</i>
                    <div class="label">企业分类：</div>
                    <div class="value">{{ item.categorize || '/' }}</div>
                  </li>
                  <li v-if="current === '安全生产'">
                    <i class="iconfont c-text-color4">&#xe611;</i>
                    <div class="label">安全生产标准化等级：</div>
                    <div class="value">{{ item.standardConstruction || '/' }}</div>
                  </li>
                  <li v-if="current === '环保管理'">
                    <i class="iconfont c-text-color3">&#xe69e;</i>
                    <div class="label">信用评价等级：</div>
                    <div class="value">{{ item.creditLevel || '/' }}</div>
                  </li>
                  <li v-if="current === '环保管理' || current === '能源管理'">
                    <i class="iconfont c-text-color4">&#xe611;</i>
                    <div class="label">集团分级评价等级：</div>
                    <div class="value">{{ item.envLevel || item.groupRateLevel || '/' }}</div>
                  </li>
                  <li v-if="current === '环保管理'">
                    <i class="iconfont c-text-color5">&#xe611;</i>
                    <div class="label">企业标签：</div>
                    <div class="value">
                      {{ item['companyLabel'].map(o => o['labeldetail']).join('、') || '/' }}
                    </div>
                  </li>
                  <!-- <li v-if="current === '环保管理'">
                    <i class="iconfont c-text-color6">&#xe611;</i>
                    <div class="label">有无生产实体：</div>
                    <div class="value">
                      {{ item['isProductEntity'] }}
                    </div>
                  </li> -->
                  <li v-if="current === '环保管理'">
                    <i class="iconfont c-text-color7">&#xe611;</i>
                    <div class="label">是否上传环境管理体系认证附件：</div>
                    <div class="value">
                      {{ item['isManageSystemFile'] }}
                    </div>
                  </li>
                  <!-- <li v-if="current === '环保管理'">
                    <i class="iconfont c-text-color7">&#xe611;</i>
                    <div class="label">是否重点排污单位</div>
                    <div class="value">
                      {{ item['isImportPollutant'] }}
                    </div>
                  </li> -->
                  <li v-if="current === '环保管理'">
                    <i class="iconfont c-text-color1">&#xe611;</i>
                    <div class="label">是否上传企业环境风险评估报告：</div>
                    <div class="value">
                      {{ item['isEnvRiskFile'] }}
                    </div>
                  </li>
                  <li v-if="current === '消防管理'">
                    <i class="iconfont c-text-color3">&#xe69e;</i>
                    <div class="label">监管类型：</div>
                    <div class="value">{{ item.supervisoryLevel || '/' }}</div>
                  </li>
                  <li v-if="current === '消防管理'">
                    <i class="iconfont c-text-color4">&#xe611;</i>
                    <div class="label">消防安全管理人：</div>
                    <div class="value">{{ item.fireHead || '/' }}</div>
                  </li>
                  <li v-if="current === '消防管理'">
                    <i class="iconfont c-text-color4">&#xe611;</i>
                    <div class="label">联系电话：</div>
                    <div class="value">{{ item.fireHeadPhone || '/' }}</div>
                  </li>
                  <li v-if="current === '能源管理'">
                    <i class="iconfont c-text-color4">&#xe611;</i>
                    <div class="label">是否重点用能单位：</div>
                    <div class="value">{{ item.isEnergy || '/' }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </template>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="formInline.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <!--          <customPopCheckbox v-if="current !== '能源管理'" :list="selectOptionAll['企业类别']" :check-value.sync="formInline.companyCategory" title="企业类别" />-->
          <customPopCheckbox v-if="current === '环保管理'" ref="fixedRef" :list="selectOptionAll['行业类别-fixed']" :check-value.sync="formInline['industryType']" title="行业类别" />
          <!-- <customPopCascade
            v-if="current === '环保管理'"
            ref="customPopCascade"
            title="行政区划"
            cascader-title="行政区划"
            :field-names="cascadeDistrict.fieldNames"
            :check-value.sync="formInline.districtCode"
            :list="cascadeDistrict.district"
            @change="cascadeDistrictChange"
            @clearData="formInline.districtCode = ''"
          /> -->
          <customPopCheckbox v-if="current === '环保管理'" :list="selectOptionAll['环保履职评价-集团分级评价等级']" :check-value.sync="formInline.envLevel" title="集团分级评价等级" />
          <!--<customPopCheckbox v-if="current === '能源管理'" :list="selectOptionAll['环保履职评价-集团分级评价等级']" :check-value.sync="formInline.groupRateLevel" title="评价等级" />-->
          <!--<customPopCheckbox v-if="current === '能源管理'" :list="selectOptionAll['是否']" :check-value.sync="formInline.isEnergy" title="是否重点用能单位" />-->
          <customPopCheckbox v-if="current === '消防管理'" :list="selectOptionAll['企业监督等级']" :check-value.sync="formInline.supervisoryLevel" title="监管类型" />
          <customPopCheckbox v-if="current === '安全生产'" :list="selectOptionAll['企业分类']" :check-value.sync="formInline['categorize']" title="企业分类" />
          <customPopCheckbox v-if="current === '安全生产'" :list="selectOptionAll['安全生产标准化建设情况']" :check-value.sync="formInline['standardConstruction']" title="安全生产标准化等级" />
          <customPopCheckbox v-if="current === '环保管理'" :list="selectOptionAll['环保-信用评价等级']" :check-value.sync="formInline['creditLevel']" title="信用评价等级" />
          <customPopCheckbox v-if="current === '环保管理'" :list="selectOptionAll['环保-综合管理']" :check-value.sync="formInline['isProductEntity']" title="有无生产实体" />
          <customPopCheckbox v-if="current === '环保管理'" :list="selectOptionAll['企业标签']" :check-value.sync="formInline.labelDetail" title="企业标签" />
          <customPopCheckbox v-if="current === '能源管理'" :list="selectOptionAll['能源-是否重点用能单位']" :check-value.sync="formInline.isEnergy" title="是否重点用能单位" />
          <customPopCheckbox v-if="current === '能源管理'" :list="selectOptionAll['环保履职评价-集团分级评价等级']" :check-value.sync="formInline.groupRateLevel" title="集团分级评价等级" />
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { aqCompanyList, hbCompanyList, nyCompanyList, xfCompanyList } from '@/api/enterprise'
import refHandler from '@/assets/mixin/refHandler'
import commonList from '@/assets/mixin/commonList'
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'
import { getDistrict } from '@/api/common'

export default {
  components: { CustomDetailsTopbar },
  mixins: [commonList, refHandler],
  inject: ['layout'],
  data() {
    return {
      formInline: {
        pageNum: 1,
        pageSize: 10,
        companyName: '',
        companyCategory: '',
        industryType: '',
        groupRateLevel: '',
        envLevel: '',
        labelDetail: '',
        districtCode: '',
        supervisoryLevel: '',
        isEnergy: ''
      },
      cascadeDistrict: {
        district: [], // 行政区划
        fieldNames: {
          text: 'name',
          value: 'code',
          children: 'subList'
        }
      },
      current: '',
      listData: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.getDistrict()
    })
  },
  mounted() {
    const { current } = this.$route.query
    if (current) {
      this.current = current
    }
    this.companyList()
  },
  methods: {
    // 分页
    handlePages(value) {
      this.formInline.pageNum = value
      this.companyList()
    },
    // 获取行政区划
    async getDistrict() {
      const { data, status } = await getDistrict()
      if (data && status === 0) {
        this.cascadeDistrict.district = this.removerEmpty(data, 'subList')
      }
    },
    // 行政区划链接框改变
    cascadeDistrictChange({ value, selectedOptions, tabIndex }) {
      this.formInline.districtCode = value
    },
    // 回调去除空白子集
    removerEmpty(data, listName) {
      if (data.length) {
        data.forEach(item => {
          if (item[listName] && item[listName].length) {
            item[listName] = this.removerEmpty(item[listName], listName)
          } else {
            delete item[listName]
          }
        })
      }
      return data
    },
    // 企业名称查询
    handleSearch(value) {
      this.formInline.companyName = value
      this.formInline.pageNum = 1
      this.listData = []
      this.companyList()
    },

    // 跳转详情
    goToDetails(item) {
      const { companyId } = item
      this.$router.push({
        path: '/staging/enterpriseDetails',
        query: { companyId, current: this.current }
      })
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { ...this.$route.query }
      })
    },
    // 获取企业列表数据
    async companyList() {
      const api = {
        安全生产: aqCompanyList,
        环保管理: hbCompanyList,
        消防管理: xfCompanyList,
        能源管理: nyCompanyList
      }
      this.$refs.customLoadmore.loadStatus = true
      // this.layout.showAreaLoading(['.listInner', '.table-list'])
      const { status, data } = await api[this.current](this.formInline)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      // this.layout.hideAreaLoading(['.listInner', '.table-list'])
    },
    resetSuperSearch() {
      // this.formInline.companyCategory = ''
      // this.formInline.industryType = ''
      // this.formInline.groupRateLevel = ''
      // this.formInline.envLevel = ''
      if (this.$refs.customPopCascade) this.$refs.customPopCascade.clearCascader()
      Object.keys(this.formInline).forEach(key => {
        this.formInline[key] = ''
      })
      this.$refs.customSearch.restore()
      this.formInline.pageNum = 1
      this.formInline.pageSize = 10
    },
    /**
     * 深拷贝
     * @param obj
     */
    deepCopy(obj) {
      if (obj === null || typeof obj !== 'object') {
        return obj
      }
      const copy = Array.isArray(obj) ? [] : {}
      for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          copy[key] = this.deepCopy(obj[key])
        }
      }
      return copy
    },
    handleSuperSearch() {
      this.superSearch = false
      this.formInline.pageNum = 1
      this.listData = []
      this.companyList()
    }
  }
}
</script>

<style lang="scss" scoped>
.isShowLoading_box {
  height: 400px;
}
</style>
